<template>
    <el-card class="!border-none" shadow="never">
        <div class="text-4xl mb-5 pl-[20px]">
            <span v-if="route.query.keywords">
                查找"{{ route.query.keywords }}"
            </span>
            <span v-else>{{ route.query.name }}</span>
        </div>
        <div>
            <div class="pl-[20px] pt-5 text-tx-secondary" v-if="route.query.keywords">
                为您找到相关结果 {{ state.tableList.length }}个
            </div>
            <ArticleList :list="state.tableList" />
            <div class="flex justify-center align-middle pt-[10px]" v-if="state.tableList.length > 0">
                <pagination v-model="state" @tableChange="getTableList" />
            </div>
        </div>
    </el-card>
</template>
<script lang="ts" setup>
import { articleList } from "@/api/cms/article";
const route = useRoute()
const keyword: any = computed(() => route.query.keywords || '')

const state = reactive({
    loading: false,
    tableList: [],
    queryParams: {
        title: "",
        cate_id: "",
    },
    tableParams: {
        page_num: 1,
        page_limit: 6,
        page_total: 0 as any,
    },
});

const { getTableList, searchTable, resetQuery } = usePage({
    tableData: state,
    apiData: articleList,
});

watch([() => route.query.keywords], () => {
    state.queryParams.title = route.query.keywords as any;
    getTableList()
})

onMounted(() => {
    state.queryParams.title = keyword.value;
    getTableList();
})

</script>
<style lang="scss" scoped></style>
